<!DOCTYPE html>
<html>
<head>
  <title>插槽</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<body>
    <div id="navBar">
        <nav-bar :items="items">
            <i class="iconfont" slot="aa" slot-scope="props">1</i>
        </nav-bar>
    </div>
    <script type="text/javascript">
        var nav = new Vue({
            el:"#navBar",
            components:{
                navBar:{
                    template:'\
                    <ul>\
                        <li v-for="item in items">\
                            {{item.text}}\
                            <slot name="aa"></slot>\
                        </li>\
                    </ul>\
                    ',
                    props:["items"],
                },
            },
            data:{
                items:[
                    {text:"首页",icon:"icon-xiaolian"},
                    {text:"关于我们",icon:"icon-tuikuan"},
                    {text:"联系我们",icon:"icon-shouji"},
                    {text:"我们的项目",icon:"icon-youxiang"},
                    {text:"很好",icon:"icon-weixin"},
                ]
            }
        })
    </script>
</body>
</html>